<template>
	<div>
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>

		<div class="container submit_order_container bgd_color_gray">
			<div v-show="isShow" v-for="item in adrMessageList" style="margin-bottom: 10px">
				<div class="min_height120 pad_lr26 overflow_hide f_size24 f_color_gray0 bgd_color_white border_bot2">
					<div class="left pad_lr15 margin_t10 f_color_0">
						<div class="f_size24">
							<span>{{item.receiver}}</span>&nbsp;&nbsp;
							<span>手机号 :&nbsp;&nbsp;{{item.receivePhone}}</span>
						</div>
						<div class="f_size24">
							<span>{{item.province}} {{item.city}} {{item.area}} {{item.detail}}</span>
						</div>
					</div>
				</div>
				<div class="line_height70 f_size20 f_color_0 overflow_hide pad_lr26 border_bot1 bgd_color_white">
					<div class="left" style="margin-right: 15px;">
						默认状态
					</div>
					<div class="left">
						<div class="checkbox">
							<input onclick="return false;" v-model="item.checked" type="checkbox" disabled="disabled" />
							<label></label>
						</div>
					</div>
					<div @click="deleteAddress(item.addressId)" class="right pad_lr10">
						<img class="margin_lr10" src="../static/images/delete_icon.png" />
						<span>删除</span>
					</div>
					<router-link :to="{name: 'EditAddress', query: {addressId: item.id}}">
						<div class="right pad_lr10">
							<img class="margin_lr10" src="../static/images/edite_icon.png" />
							<span class="f_color_0">编辑</span>
						</div>
					</router-link>
				</div>
			</div>
			<div class="margin_t50 margin_lr20 box_size_border">
				<router-link to="/addAddress">
					<button class="f_size32 f_color_white bgd_color_main width_100 line_height80 border_none border_radius20">添加新的收货地址</button>
				</router-link>
			</div>
		</div>

	</div>
</template>
<script>
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui';
	
	export default {
		created() {
			var self = this
			this.$api.get('/front/address', null, r => {
				console.log('管理地址r', r)
				if(r.data.list.length == 0) {
					self.isShow = false
				} else {
					this.adrMessageList = r.data.list
				}
			})
		},
		data() {
			return {
				leftText: '',
				headerText: '地址管理',
				adrMessageList: [],
				checked: true,
				isShow: true
			}
		},
		methods: {
			deleteAddress: function(id) {
				var self = this
				MessageBox.confirm('确定执行此操作?').then(action => {
					this.$api.delete('/front/address/' + id, null, r => {
						console.log('删除地址成功r', r)
						if(r.code===200){
							Toast(r.data)
							setTimeout(function(){
								self.$router.go(0)
							}, 1000)
						}else {
							Toast(r.error)
						}
					})
				}).catch(action => {

				})
			}
		}
	}
</script>

<style>
	.checkbox {
		position: relative;
		display: inline-block;
		height: 50px;
		top: 15px;
		float: right;
	}
	
	.checkbox input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		opacity: 0;
		cursor: pointer;
	}
	
	.checkbox label {
		width: 90px;
		height: 42px;
		background: #ccc;
		position: relative;
		display: inline-block;
		border-radius: 46px;
		-webkit-transition: 0.4s;
		transition: 0.4s;
	}
	
	.checkbox label:after {
		content: '';
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 100%;
		left: 0;
		top: -5px;
		z-index: 2;
		background: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		-webkit-transition: 0.4s;
		transition: 0.4s;
	}
	
	.checkbox input:checked+label {
		background: #703320;
	}
	
	.checkbox input:hover+label:after {
		box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
	}
	
	.checkbox input:checked+label:after {
		left: 40px;
	}
	
	.checkbox input:checked+label:after {
		background: #fff;
	}
</style>